<template>
  <div style="width:100%;" :id="formatId">
    <div v-html="value"></div>
  </div>
</template>
<script>
export default {
  name: 'wangEditor',
  props: ['value', 'defaultId'],
  data() {
    return {
      content: ''
    }
  },
  computed: {
    formatId() {
      return 'wangEditor' + (this.defaultId || '')
    }
  },
  mounted() {
    this.$nextTick(() => {
      var E = window.wangEditor
      var editor = new E('#wangEditor' + (this.defaultId || ''))
      editor.customConfig.uploadFileName = 'file'
      editor.customConfig.uploadImgServer = PATH + '/platform/getPicAddress.do'
      // 忽略粘贴内容中的图片
      editor.customConfig.pasteIgnoreImg = true
      editor.customConfig.uploadImgHooks = {
        customInsert: function(insertImg, result, editor) {
          var url = result.data
          insertImg(url)
        }
      }
      editor.customConfig.zIndex = 0
      editor.customConfig.height = 500
      // 自定义菜单配置
      editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table' // 表格
      ]
      var that = this
      editor.customConfig.onchange = function(html) {
        that.$emit('input', html)
      }
      editor.create()
    })
  }
}
</script>